<template>
    <div class="tables-conter-right">
        <el-table :data="filterTableData" border height="calc(100vh - 190px)">
            <el-table-column prop="columnName" label="字段名称" show-overflow-tooltip>
                <template slot="header" slot-scope="/* eslint-disable */ scope">
                    字段名称
                    <el-popover placement="bottom" v-model="dataOption.search1.visible" @hide="hiddenSearch('search1')" @show="showSearch('search1')">
                        <template>
                            <input
                                class="tables-hd-filter"
                                type="text"
                                style="width: 160px; line-height: 1.8; padding: 0 5px"
                                v-model="dataOption.search1.temp"
                                @keypress.enter="dataOption.search1.visible = false"
                            />
                            <div style="margin: 8px">
                                <el-button size="mini" @click="dataOption.search1.visible = false">查询 </el-button>
                                <el-button type="primary" size="mini" @click="dataOption.search1.temp = ''">重置 </el-button>
                            </div>
                        </template>
                        <i class="el-icon-search" :class="[dataOption.search1.data.length ? 'active' : '']" slot="reference"></i>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="columnComment" label="字段说明" show-overflow-tooltip>
                <template slot="header" slot-scope="/* eslint-disable */ scope">
                    字段说明
                    <el-popover placement="bottom" v-model="dataOption.search2.visible" @hide="hiddenSearch('search2')" @show="showSearch('search2')">
                        <template>
                            <input
                                class="tables-hd-filter"
                                type="text"
                                style="width: 160px; line-height: 1.8; padding: 0 5px"
                                v-model="dataOption.search2.temp"
                                @keypress.enter="dataOption.search2.visible = false"
                            />
                            <div style="margin: 8px">
                                <el-button size="mini" @click="dataOption.search2.visible = false">查询 </el-button>
                                <el-button type="primary" size="mini" @click="dataOption.search2.temp = ''">重置 </el-button>
                            </div>
                        </template>
                        <i class="el-icon-search" :class="[dataOption.search2.data.length ? 'active' : '']" slot="reference"></i>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { IMantenceTablesRightDataItem } from '@/pages/system-maintence/system-setting/mantence';

@Component({
    name: 'MantenceTablesRight',
})
export default class MantenceTablesRight extends Vue {
    private dataOption = {
        search1: {
            visible: false,
            temp: '',
            data: '',
        },
        search2: {
            visible: false,
            temp: '',
            data: '',
        },
    };

    @Prop({ default: [] }) readonly data!: IMantenceTablesRightDataItem[];

    get filterTableData(): IMantenceTablesRightDataItem[] {
        const search1 = this.dataOption.search1.data;
        const search2 = this.dataOption.search2.data;
        const filterData = this.data.filter(item => {
            return (
                item.columnName.toLowerCase().indexOf(search1.toLowerCase()) > -1 &&
                item.columnComment.toLowerCase().indexOf(search2.toLowerCase()) > -1
            );
        });
        return filterData;
    }

    /**
     * 开启关闭搜索框
     * @param type
     */
    hiddenSearch(type: string): void {
        if (type === 'search1') {
            this.dataOption.search1.data = this.dataOption.search1.temp;
        } else {
            this.dataOption.search2.data = this.dataOption.search2.temp;
        }
    }
    showSearch(type: string): void {
        if (type === 'search1') {
            this.dataOption.search1.temp = this.dataOption.search1.data;
        } else {
            this.dataOption.search2.temp = this.dataOption.search2.data;
        }
    }
}
</script>

<style lang="scss">
.tables-conter-right {
    width: 50%;
    height: 100%;
    border-right: 1px solid #eee;

    .el-icon-search {
        float: right;
        line-height: 20px;
        cursor: pointer;

        &.active {
            color: #66b1ff;
            font-weight: bold;
        }
    }
}
</style>
